<template>
   <div class="login-container">
     <el-form class="login-form" :model="registerForm" :rules="registerFormRules" ref="registerFormRef" label-width="80px">
       <h2 class="login-title">人在回路机器学习</h2>
       <el-form-item label="账号" prop="username">
         <el-input clearable  v-model="registerForm.username" placeholder="请输入账号"></el-input>
       </el-form-item>
       <el-form-item label="密码" prop="password">
         <el-input clearable type="password" v-model="registerForm.password" placeholder="请输入密码"></el-input>
       </el-form-item>
      <el-form-item label="邮箱" prop="email">
         <el-input clearable v-model="registerForm.email" placeholder="请输入邮箱"></el-input>
       </el-form-item>
       <el-form-item>
         <el-button type="primary" @click="submitRegister">注册</el-button>
         <el-button type="primary" @click="gotoLogin">去登录</el-button>
       </el-form-item>
     </el-form>
   </div>
</template>

<script>
import registerApi from '../../api/register'
export default {
  name: 'Register',
  data () {
    return {
      registerForm: {
        username: 'admin',
        password: '123456',
        email: 'wang@123'
      },
      // 登录表单验证规则
      registerFormRules: {
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' }
        ],
        username: [
          { required: true, message: '请输入账号', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请选择密码', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 登录功能实现
    submitRegister () {
      this.$refs.registerFormRef.validate(valid => {
        if (valid) {
          console.log(this.registerForm)
          registerApi.register(this.registerForm).then(response => {
            const resp = response.data
            console.log(resp)
            if (resp.meta.code === 200) {
              this.$message.success('注册成功')
              this.$router.push('/login')
            } else {
              this.$message.error('注册失败')
            }
          })
        } else {
          return false
        }
      })
    },
    // 跳转至登录页面
    gotoLogin () {
      this.$router.push('/login')
    }
  }
}
</script>

<style scoped>
  .login-container{
    position: absolute;
    width: 100%;
    height: 100%;
    background: url("./../../assets/img/login.jpg");
    overflow: hidden;
  }
  .login-form{
    background: red;
    width: 350px;
    margin: 160px auto;
    background: rgba(255,255,255,0.8);
    padding: 30px;
    border-radius: 20px;
  }
  .login-title{
    text-align: center;
    color: #303133;
  }
  .el-form-item__label{
    text-align: center !important;
  }
  .el-button{
    margin: 0 20px;
  }

</style>
